<template>
  <van-tabbar
    v-model="active"
    @change="onChange"
    active-color="#FF5654"
    border
    inactive-color="#666"
  >
    <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
    <van-tabbar-item icon="chat">生活圈</van-tabbar-item>
    <van-tabbar-item icon="underway">业主</van-tabbar-item>
    <van-tabbar-item icon="friends">个人中心</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      routerPath: [
        "/",
        "/friendcircle",
        "/rentstate",
        "/mine",
      ],
    };
  },
  methods: {
    onChange(index) {
      if (this.currentRentPath) {
        this.routerPath[2] = this.currentRentPath;
      }
      if (index == 1 || index == 2 ) {
        if (!this.userId) {
          this.$router.push("/login");
        } else {
          this.$router.push(this.routerPath[index]);
        }
      } else {
        this.$router.push(this.routerPath[index]);
      }
    },
  },
  activated() {
    console.log(this.currentRentPath);
    if (this.currentRentPath) {
      this.routerPath[2] = this.currentRentPath;
    }
    console.log(this.routerPath);
    let path = this.$route.path;
    console.log(this.$route.path);
    // console.log(path);
    // let info = [...path.slice(1)].some((val) => val == "/");
    // if (info) {
    //   path = path.slice(0, [...path.slice(1)].indexOf("/") + 1);
    // }
    this.active = this.routerPath.indexOf(path);
    console.log(this.active);
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
      currentRentPath: (state) => state.moduleUser.currentRentPath,
    }),
  },
};
</script>

<style scoped>
.van-tabbar {
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.1);
}
</style>